$( document ).ready(function() {
    var selectedSeats = $("#Selected_seats");
    var selectedSeatCount = 0;
    var totalPrice = $("#total_price");
    var pricePerTicket = parseFloat($("#ticket_price")[0].innerText);
    
    $(document).on ("click", ".empty-seat", function () {
        if(selectedSeatCount < 8) {
            $(this).switchClass( 'empty-seat', 'chosen-seat');
            var seatInfo = $(this).attr("id").split("_")[1];
            selectedSeats.append("<div class='ticket-box' id='Chosen_" + seatInfo +"'>Sēdvieta: <strong>"+ seatInfo.split("-")[1] +"</strong> Rinda: <strong>"+ seatInfo.split("-")[0] +"</strong></div>");
            selectedSeatCount++;   
            totalPrice[0].innerText = (selectedSeatCount * pricePerTicket).toFixed(2);
        } else {
            $(this).effect( "highlight", {color:"red"}, 200 );
        }
    });
    
    $(document).on ("click", ".deselected-seat", function () {
        if(selectedSeatCount < 8) {
            $(this).switchClass( 'empty-seat', 'chosen-seat');
            var seatInfo = $(this).attr("id").split("_")[1];
            selectedSeats.append("<div class='ticket-box' id='Chosen_" + seatInfo +"'>Sēdvieta: <strong>"+ seatInfo.split("-")[1] +"</strong> Rinda: <strong>"+ seatInfo.split("-")[0] +"</strong></div>");
            selectedSeatCount++;   
            totalPrice[0].innerText = (selectedSeatCount * pricePerTicket).toFixed(2);
        } else {
            $(this).effect( "highlight", {color:"red"}, 200 );
        }
    });
    
    $(document).on ("click", ".chosen-seat", function () {
        $(this).switchClass( 'chosen-seat', 'deselected-seat');
        selectedSeats.children("#Chosen_" + $(this).attr("id").split("_")[1]).fadeOut("fast", function() {$(this).remove()});
        selectedSeatCount--;
        totalPrice[0].innerText = (selectedSeatCount * pricePerTicket).toFixed(2);
    });
    
    $(document).on ("mouseleave", ".deselected-seat", function () {
        $(this).switchClass( 'deselected-seat', 'empty-seat');
    });
    
    $("#Reservation_form").submit(function(event) {
        var chosenSeatsObj = [];
        
        $(".chosen-seat").each(function( index ){
            var seatInfo = $(this).attr("id").split("_")[1];
            chosenSeatsObj.push({"row" : seatInfo.split("-")[0], "seat" : seatInfo.split("-")[1]});
        });
        
        $("#Chosen_Seats")[0].value = JSON.stringify(chosenSeatsObj);
        
        return true;
    });
    
/*    var rows = $('#Row_count')[0].value;
    var seats = $('#Seat_count')[0].value;
    
    var table = document.createElement('table');
    table.id = 'Reservation_table';
    table.className = 'cell-spacing';
    
    var row, cell;
    for(var curRow = 0; curRow < rows; curRow++){
            row= document.createElement('tr');
            for(var curSeat = 0; curSeat < seats; curSeat++){
                
                    cell = document.createElement('td');
                    cell.id = 'Place_' + (rows - curRow) + '-' + (curSeat + 1);
                    cell.className = 'empty-seat';
                    
                    row.appendChild(cell);
            }
            table.appendChild(row);
    }
    document.getElementById("Placeholder").appendChild(table);
*/
});


